<template>
  <div class="number-select" v-if="!getIsPhone">
    <ab-options 
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      :showIntegrate="showIntegrate"
      @on-msg="updateOptionsState"
    ></ab-options>
    <fastchoose-buttons-shengxiao v-show="showFastChooseButtons"></fastchoose-buttons-shengxiao>
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area" v-if="!showIntegrate">
      <lottery-box-only
        class="select-row-adjust"
        :item="getCurrentLotteryState[0]"
        @click="handleUpdateData"
        :activeSwitchIndex="activeSwitchIndex"
        >
      </lottery-box-only>
    </div>
  </div>
  <div v-else >
    <ab-options 
      ref='ab'
      :options="options" 
      :activeSwitchIndex="activeSwitchIndex"
      @click="updateIndex"
      @on-msg="updateOptionsState"
    ></ab-options>
    <div v-if="!showIntegrate">
      <lottery-box-flow-phone
        :item="getCurrentLotteryState[0]"
        @click="handleUpdateData"
        class="select-row-adjust"
        :activeSwitchIndex="activeSwitchIndex"
      ></lottery-box-flow-phone>
    </div>
    <div v-if="showIntegrate">
      <lottery-box-flow-phone
        v-for="item in getCurrentLotteryState.slice(1)"
        :item="item"
        :key="item.id"
        @click="handleUpdateData"
        class="select-row-adjust-integrate"
        :activeSwitchIndex="activeSwitchIndex"
      ></lottery-box-flow-phone>
    </div>
    <fastchoose-buttons-shengxiao-phone
      ref="fastchoose" 
      v-show="showFastChooseButtons"
      @click="closeFastChoosePanel"
      class="fastchoose-adjust"
    >
    </fastchoose-buttons-shengxiao-phone>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxOnly from '@/components/lottery-type/common/lottery-box-only'
import LotteryBoxFlowPhone from '@/components/lottery-type/common/lottery-box-flow-phone'
import AbOptions from '@/components/ab-options/ab-options'
import FastchooseButtonsShengxiaoPhone from '@/components/base/fastchoose-buttons/fastchoose-buttons-shengxiao-phone'
import FastchooseButtonsShengxiao from '@/components/base/fastchoose-buttons/fastchoose-buttons-shengxiao'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    LotteryBoxOnly,
    AbOptions,
    LotteryBoxFlowPhone,
    FastchooseButtonsShengxiaoPhone,
    FastchooseButtonsShengxiao
  },
  data() {
    return {
      instruction: '当期开出的最后一位号码为特码',
      // // 快速选择按钮名字
      // buttons: [
      //   {
      //     id: 1,
      //     btnNames: [
      //       { name: '红', color: 'red', selected: false },
      //       { name:'绿', color: 'green', selected: false }, 
      //       { name: '蓝', color: 'blue', selected: false }]
      //   },
      //   {
      //     id: 2,
      //     btnNames: [
      //       {name: '大', selected: false}, 
      //       {name: '小', selected: false}, 
      //       {name: '单', selected: false}, 
      //       {name: '双', selected: false}
      //     ]
      //   },
      //   {
      //     id: 3,
      //     btnNames: [
      //       {name: '合单', selected: false}, 
      //       {name: '合双', selected: false},
      //     ]
      //   },
      //   {
      //     id: 4,
      //     btnNames: [
      //       {name: '鼠', selected: false}, 
      //       {name: '牛', selected: false}, 
      //       {name: '虎', selected: false}, 
      //       {name: '兔', selected: false},
      //       {name: '龙', selected: false}, 
      //       {name: '蛇', selected: false}, 
      //       {name: '马', selected: false}, 
      //       {name: '羊', selected: false},
      //       {name: '猴', selected: false}, 
      //       {name: '鸡', selected: false}, 
      //       {name: '狗', selected: false}, 
      //       {name: '猪', selected: false},
      //     ]
      //   }
      // ],
      // 快速选号（整合/快捷选号）
      options: [
        {
          id: 'fastchoose',
          name: '快捷选号',
          disabled: false
        }
      ],
      // 快速选择disabled
      fastchooseDisabled: false,
      // 整合disabled
      integrateDisabled: false,     
      // 默认a面
      activeSwitchIndex: 0,
      // 是否显示整合 
      showIntegrate: false,
      // 快速选择条
      showFastChooseButtons: false,
      bigsmallCondition: '',
      colorCondition: ''
    }
  },
  methods: {
    // ab面高亮
    updateIndex(index) {
      this.activeSwitchIndex = index
    },
    updateOptionsState(item) {
      if (item.id == 'integrate') {
        if (item.active) {
          this.showIntegrate = true
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = true
            }
          })
        } else {
          this.showIntegrate = false
          this.options.forEach(option => {
            if (option.id == 'fastchoose') {
              option.disabled = false
            }
          })
        }
      } else {
        if (item.active) {
          this.showFastChooseButtons = true
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = true
            }
          })
        } else {
          this.showFastChooseButtons = false
          this.options.forEach(option => {
            if (option.id == 'integrate') {
              option.disabled = false
            }
          })
        }
      }
    },
    // // 整合页面切换
    // toggleIntegratePage(showIntegrate) {
    //   this.showIntegrate = showIntegrate
    // },
    closeFastChoosePanel() {
      this.$refs.ab.$children.forEach((item, index) => {
        if (index > 0) {
          item.selected = false
        }
      })
      this.options.forEach(item => {
        if(item.id == 'integrate') {
          item.disabled = false
        }
      })
      this.showFastChooseButtons = false
    },
    updateBigsmallCondition(condition) {
      this.bigsmallCondition = condition
    },
    updateColorCondition(condition) {
      this.colorCondition = condition
    },
    handleFastChoose(conditions) {
      let item = this.cloendCurrentLotteryState[0]
      let numbers = item.numbers
      switch(conditions) {
          case '红':
            numbers.forEach(number => {
              number.selected = number.color == 'red' ? true : false
            })
          break;
          case '绿':
            numbers.forEach(number => {
              number.selected = number.color == 'green' ? true : false
            })
          break;
          case '蓝':
            numbers.forEach(number => {
              number.selected = number.color == 'blue' ? true : false
            })
          break;
          case '红大': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && number.number >= 25) ? true : false
            })
          break;
          case '红小': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && number.number < 25) ? true : false
            })
          break;
          case '红单': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && (number.number % 2 !== 0 )) ? true : false
            })
          break;
          case '红双': 
            numbers.forEach(number => {
              number.selected = (number.color == 'red' && (number.number % 2 == 0)) ? true : false
            })
          break;
          default:
            numbers.forEach(number => {
              number.selected = false
            })
        }
      this.handleUpdateData(item)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .select-row-adjust >>> .box
    &.red 
      .box-top 
        background $color-ball-red
      .box-bottom 
        display none 
      &.active 
        border: 1px solid $color-ball-red;
        background: rgba($color-ball-red, 0.102);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box
        color $color-ball-red
        .box-bottom 
          display inline-block
    &.green
      .box-top 
        background $color-ball-green
      .box-bottom 
        display none 
      &.active 
        border: 1px solid $color-ball-green;
        background: rgba($color-ball-green, 0.102);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box
        .box-bottom 
          color $color-ball-green
          display inline-block
    &.blue 
      .box-top 
        background $color-ball-blue
      .box-bottom 
        display none 
      &.active  
        border: 1px solid $color-ball-blue;
        background: rgba($color-ball-blue, 0.102);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
        box-sizing: border-box
        .box-bottom 
          color $color-ball-green
          display inline-block
    .box-top 
      color #fff 
      line-height 20px
      border-radius 10px
      width 35px
      
  @media screen and (min-width 750px)
    .number-select
      .number-select-area
        width 100%
        .select-row
          display flex
          width 100%
          box-sizing border-box
          flex-wrap wrap
          padding-left 10px
          .select-box
            width 86px
            height 48px
            margin-left 10px
            margin-top 10px
            margin-bottom 10px
            &.number-box-select-green
              border: 1px solid #429900;
              background: rgba(66, 153, 0, 0.102);
              box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
              box-sizing: border-box
            &.number-box-select-red
              border: 1px solid $color-ball-red;
              background: rgba($color-ball-red, 0.102);
              box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
              box-sizing: border-box
            &.number-box-select-blue
              border: 1px solid $color-ball-blue;
              background: rgba($color-ball-blue, 0.102);
              box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
              box-sizing: border-box
      .tema-zhenghe
        .number-select-area
          .select-row
            display flex
            width 100%
            box-sizing border-box
            flex-wrap wrap
            padding-left 10px
            .zhenghe-select-box
              width 110px
              height 48px
              margin-left 10px
              margin-top 10px
              margin-bottom 10px
              &.number-box-select-blue
                border: 1px solid $color-ball-blue;
                background: rgba($color-ball-blue, 0.102);
                box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
                box-sizing: border-box
  @media screen and (max-width 750px) 
    .select-row-adjust-integrate >>> .select-row 
        margin-top 10px 
        &.border-bottom 
          border-color red !important
    .select-row-adjust-integrate >>> .lottery-box-adjust 
      width calc((100% - 40px) / 4) !important
      &:nth-child(5n + 5) 
        margin-right 10px !important
      &:nth-child(4n + 4) 
        margin-right 0px 
      .box-top 
        color $color-theme-dark
        width 100%
    .select-row-adjust-integrate 
      &:last-child >>> .lottery-box-adjust  
        width calc((100% - 50px) / 5) !important
    .select-row-adjust-integrate >>> .active 
      border: 1px solid $color-ball-red;
      background: rgba($color-ball-red, 0.102);
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
      box-sizing: border-box
      &.lottery-box-adjust  
        .box-top 
          color $color-theme-red
      
</style>